﻿body, html, a, div, hgroup, h3, h2, p {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-size: 16px;

    div#wrapper {
        margin: 20px 20px;

        & > div {
            display: inline-block;
            width: 140px;
            /*height: 250px;*/
            border-top: 2px solid #d3d7da;
            border-bottom: 2px solid #d3d7da;
            vertical-align: text-top;
            margin-right: -4px;
            padding-left: 4px;
            padding-right: 4px;
            padding-top: 10px;

            div > a {
                display: block;
                color: #c72d2f;
                text-decoration: none;

                span {
                    text-transform: uppercase;
                }

                &:first-of-type {
                    margin-top: 5px;
                }
            }


            .yellowBox {
                background-color: #ffffdd;
                margin-top: 2px;
                position: relative;
                top: -4px;
                left: 1px;
                outline: 1px solid yellow;
                outline-offset: 0px;
                

                a {
                    display: inline-block;
                }
            }

            hgroup {
                padding-left: 40px;
                margin-bottom: 16px;

                h3, h2 {
                    font-size: 1em;
                }
            }


            &:nth-child(1) {
                height: 250px;
                hgroup:before {
                    content: url(imgs/install.png);
                    position: absolute;
                    left: 26px;
                    top: 36px;
                }
            }

            &:nth-child(2) {
                height: 270px;
                hgroup:before {
                    content: url(imgs/tuneUp.png);
                    position: absolute;
                    left: 176px;
                    top: 36px;
                }
            }

            &:nth-child(3) {
                height: 250px;
                hgroup:before {
                    content: url(imgs/manage.png);
                    position: absolute;
                    left: 326px;
                    top: 36px;
                }
            }

            &:nth-child(4) {
                height: 250px;
                padding-top: 30px;
                
                hgroup:before {
                    content: url(imgs/openSource.png);
                    position: absolute;
                    left: 476px;
                    top: 36px;
                }
            }

            &:nth-child(5) {
                height: 230px;
                padding-top: 30px;

                hgroup:before {
                    content: url(imgs/twitter.png);
                    position: absolute;
                    left: 626px;
                    top: 36px;
                }
            }

            &:nth-child(6) {
                padding-top: 30px;

                hgroup:before {
                    content: url(imgs/about.png);
                    position: absolute;
                    left: 776px;
                    top: 36px;
                }
            }
        }

            & > div:first-of-type {
                border-left: 2px solid #d3d7da;
            }

            & > div:nth-child(2n) {
                border: 2px solid #d3d7da;
                /*height: 270px;*/
                background: #ffffff;
                background: -moz-linear-gradient(top, #ffffff 0%, #f1f2f3 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f1f2f3));
                background: -webkit-linear-gradient(top, #ffffff 0%,#f1f2f3 100%);
                background: -o-linear-gradient(top, #ffffff 0%,#f1f2f3 100%);
                background: -ms-linear-gradient(top, #ffffff 0%,#f1f2f3 100%);
                background: linear-gradient(to bottom, #ffffff 0%,#f1f2f3 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f2f3',GradientType=0 );
            }
    }
}
